<template>
	<view>
		<view>
			<view class="dormitoryNav">
				<view style="font-weight: 800;font-size: 42rpx;">全部信息
					<view class="leaveLine"></view>
				</view>
			</view>
			<view v-if="instructorHisList.length>0">
				<view v-for="(item,index) in instructorHisList" :key="index" @click="detailDvFun(item)">
					<!-- 	<view class="demo_transform1" v-if="item.punishStatus==0" style=" ">未处理</view>
				<view class="demo_transform" v-else-if="item.punishStatus==1" style=" ">已处理</view>
				<view v-else ></view> -->
					<view
						:class="[item.punishStatus==1?'mainContentWrap2':(item.punishStatus==0?'mainContentWrap1':'mainContentWrap')]">
						<view style="margin-top:30rpx;color:#0000FF;font-weight: 800;font-size: 32rpx;width:150rpx">
							<span style="font-size: 32rpx;margin-right:20rpx;color:#0000FF"></span>
							{{item.studentName}}
						</view>
						<view style="margin-top:38rpx;color:#8F8F94;text-align:center;font-size:32rpx;width:120rpx">
							{{item.className}}</view>
						<view style="margin-top:26rpx;color:#8F8F94;font-size:30rpx;width:170rpx">{{item.createTime}}
						</view>

						<view
							style="margin-top:40rpx;color:#0000FE;font-size: 30rpx;width:200rpx;text-align: right;flex-wrap: nowrap;">

							{{item.type}} >
						</view>
					</view>
				</view>
			</view>
			<view v-else class="repDevice">暂无违纪记录</view>
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></my-bottom> -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		name: 'leveRegistration',
		data() {
			return {
				isShowTitle: true,
				isShowList: false,
				userName: '',
				topName: '违纪历史记录',
				titleHead: '全部信息',
				bottomName: 'home',
				instructorHisList: [{
					class: '202',
					address: '畔湖苑',
					time: '2022-03-5',
				}, {
					class: '203',
					address: '畔湖苑',
					time: '2022-03-6',
				}, ],
				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "首页",
						path: '/pages/instructor/instructorIndex'
					},

					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "退出",
						path: '/pages/index/login'
					},
				],
				schoolDv: [{
					id: 1,
					title: "着装",
					isShow: false,
				}, {
					id: 2,
					title: "睡觉",
					isShow: false,
				}, {
					id: 3,
					title: "玩游戏",
					isShow: false,
				}, {
					id: 4,
					isShow: false,
					title: "外出"
				}, {
					id: 5,
					isShow: false,
					title: "抽烟"
				}, {
					id: 7,
					title: "迟到",
					isShow: false,
				}, {
					id: 8,
					title: "未戴校牌",
					isShow: false,
				}, {
					id: 9,
					title: "未穿校服",
					isShow: false,
				}, {
					id: 10,
					title: "携带外卖",
					isShow: false,
				}, {
					id: 11,
					title: "校园抽烟",
					isShow: false,
				}, {
					id: 12,
					title: "打架斗殴",
					isShow: false,
				}, {
					id: 13,
					title: "饮酒酗酒",
					isShow: false,
				}, {
					id: 14,
					title: "打牌赌博",
					isShow: false,
				}, {
					id: 15,
					title: "翻爬围墙",
					isShow: false,
				}, {
					id: 16,
					title: "谩骂他人",
					isShow: false,
				}, {
					id: 17,
					title: "携带违禁品",
					isShow: false,
				}, {
					id: 18,
					title: "宿舍抽烟",
					isShow: false,
				}, {
					id: 6,
					title: "其他",
					isShow: false,
				}, ],
				roleName: ''
			}
		},
		components: {
			topCom,
			bottomCom,
			headTitle,
		},
		mounted() {
			this.getDvHistoryByUserName()
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userName = res.data
				}
			})
			uni.getStorage({
				key: 'loginName',
				success: (res) => {
					that.roleName = res.data
				}
			})
		},
		methods: {
			getDvHistoryByUserName() {
				this.$api.instructor.getDvHistoryByUserName(this.roleName).then(res => {
					this.instructorHisList = res.data
					for (var i = 0; i < this.instructorHisList.length; i++) {
						for (var j = 0; j < this.schoolDv.length; j++) {
							if (this.instructorHisList[i].dvType == this.schoolDv[j].id) {
								this.instructorHisList[i].type = this.schoolDv[j].title
							}
						}
					}
					// this.schoolDv.forEach((item,index)=>{
					// 	if(this.instructorHisList[index].dvType==item.id){
					// 		this.instructorHisList[index].type = item.title
					// 	}
					// })
				})
			},
			detailDvFun(item) {
				uni.navigateTo({
					url: `/pages/instructor/detailDev?id=${item.id}`
				})
			},

		}
	}
</script>

<style>
	.demo_transform1 {
		transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		-moz-transform: rotate(25deg);
		width: 180rpx;
		padding: 8rpx;
		opacity: 0.3;
		;
		text-align: center;
		position: relative;
		top: 100rpx;
		right: -500rpx;
		background: #ff0088;
		margin-right: 10rpx;
		color: white;
		border-radius: 10rpx;
	}

	.demo_transform {
		transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		-moz-transform: rotate(25deg);
		width: 180rpx;
		text-align: center;
		padding: 8rpx;
		opacity: 0.3;
		;
		position: relative;
		top: 100rpx;
		right: -500rpx;
		color: white;
		background: #0ed91f;
		margin-right: 10rpx;
		border-radius: 10rpx;
	}

	.repDevice {
		text-align: center;
		font-size: 32rpx;
		color: #808080;
		margin-top: 50rpx;
	}

	.mainContentWrap {
		border: #8F8F94 solid 0rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		width: 680rpx;
		margin-left: 22rpx;
		box-shadow: 0upx 0upx 10upx 0upx #8F8F94;
		display: flex;
		justify-content: space-around;
		align-content: space-around;

	}

	.mainContentWrap1 {
		border: #ff007f solid 0rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		width: 680rpx;
		margin-left: 22rpx;
		box-shadow: 0upx 0upx 10upx 0upx #ff007f;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
	}

	.mainContentWrap2 {
		border: #3db800 solid 0rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		width: 680rpx;
		margin-left: 22rpx;
		box-shadow: 0upx 0upx 10upx 0upx #3db800;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 80rpx;
		margin-top: 30rpx;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.attBtn1 {
		margin-right: 4rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: -20rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;

	}

	.attBtnFontSlec {
		border: solid #007AFF !important;
		border-radius: 15upx;
		font-size: 20upx;
		color: white;
		background-color: #007AFF;
	}

	.attBtnFont {
		border: solid #808080 0rpx !important;
		;
		font-size: 20upx;
	}

	.attBtnFont1 {
		border: solid #808080 0rpx !important;
		;
		font-size: 20upx;
		padding-left: 18rpx !important;
		padding-right: 18rpx !important;
	}

	.attLine {
		width: 700upx;
		height: 3upx;
		background: rgba(239, 237, 236, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 10upx;
		left: 0upx;
	}

	.attBtn {
		width: 60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: -20upx;

	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 220upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;
	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
</style>
